<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷炫爱心</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="heartCanvas"></canvas>
    <script>
        const canvas = document.getElementById('heartCanvas');
        const ctx = canvas.getContext('2d');

        const name = "甘婷"; 

        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function drawHeart(t) {
            ctx.clearRect(0, 0, canvas.width, canvas.height); 
            ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2); 

            const scale = 0.8 + 0.2 * Math.sin(t * 0.005);
            ctx.scale(scale, scale);

            ctx.beginPath();
            for (let i = 0; i <= 360; i++) {
                const angle = i * Math.PI / 180;
                const x = 16 * Math.pow(Math.sin(angle), 3);
                const y = - (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle));
                ctx.lineTo(x * 10, y * 10);
            }
            ctx.closePath();

            const gradient = ctx.createRadialGradient(0, 0, 50, 0, 0, 200);
            gradient.addColorStop(0, 'red');
            gradient.addColorStop(1, 'pink');

            ctx.fillStyle = gradient;
            ctx.fill();

            ctx.font = '30px Arial'; 
            ctx.fillStyle = 'white'; 
            ctx.textAlign = 'center'; 
            ctx.textBaseline = 'middle'; 
            ctx.fillText(name, 0, 0); 

            ctx.restore();
        }

        function animate(t) {
            drawHeart(t);
            requestAnimationFrame(animate);
        }

        animate(0);
    </script>
</body>
</html>